<template>
	<div class="login-scan-container">
		<!-- <div class="font14 mb15 login-msg">{{ $t('message.scan.text') }}</div> -->
		<QrcodeContainer class="qrcode" :model="scanMode"></QrcodeContainer>
		<el-divider content-position="center" class="color-info font12">{{ $t('message.scan.mode') }}</el-divider>
		<div class="scan-mode">
			<div class="scan-mode-item" v-for="(mode, index) in scanModes" :key="index" @click="onChangeQRCode(mode)">
				<el-avatar :src="icons[mode].src" />
				<div class="scan-mode-text font14">{{icons[mode].name}}</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, defineComponent, watch } from 'vue';
import QrcodeContainer from '/@/views/login/component/qrcode.vue';

export default defineComponent({
	name: 'login/scan',
	components: { QrcodeContainer },
	props: {
		// 绑定值
		model: {
			type: Array,
			default: () => [],
		},
	},
	setup(props) {
		const qrcodeRef = ref<HTMLElement | null>(null);
		const state = reactive({
			handleMessage: undefined,
			scanMode: 'QQ',
			scanModes: [],
			icons: {
				QQ: {
					name: 'QQ',
					src: './images/login/qq.png',
				},
				WEIXIN: {
					name: '微信',
					src: './images/login/weixin.png',
				},
				QIYE_WEIXIN: {
					name: '企微',
					src: './images/login/qiye_weixin.png',
				},
				FEISHU: {
					name: '飞书',
					src: './images/login/feishu.png',
				},
				DINGDING: {
					name: '钉钉',
					src: './images/login/dingding.png',
				},
			}
		});
		
		const onChangeQRCode = (mode: string) => {
			state.scanMode = mode;
		}

		watch(() => props.model, () =>{
			state.scanModes = props.model as any;
		});
		
		return { 
			qrcodeRef,
			onChangeQRCode,
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
.login-scan-animation {
	opacity: 0;
	animation-name: error-num;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}
.login-scan-container {
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	text-align: center;
	@extend .login-scan-animation;
	animation-delay: 0.1s;
	:deep(img) {
		margin: auto;
	}
	.qrcode {
		margin: auto;
		max-height: 250px;
	}
	.login-msg {
		color: var(--el-text-color-placeholder);
		@extend .login-scan-animation;
		animation-delay: 0.2s;
	}
	.scan-mode {
		margin: 5px auto;
		display: flex;
		justify-content: space-around;
		width: 100%;
		.scan-mode-item{
			cursor: pointer;
			.scan-mode-text {
				margin-top: 5px;
				color: var(--el-text-color-placeholder);
				text-align: center;
			}
		}
	}
	:deep(.el-divider__text) {
		color: var(--el-text-color-placeholder);
	}
	:deep(.el-avatar) {
		background: none;
	}
	:deep(.el-divider--horizontal){
		margin: 20px 0 10px 0;
	}
}
</style>
